<template>
    <div class="slider" ref="mySlider">
        <div class="left-btn" :class="{active:myPosition.isBtn==2}"></div>
        <div class="propo"></div>
        <div class="propo-bg"></div>
        <div class="right-btn" :class="{active:myPosition.isBtn==1}"></div>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: 'slider',
        props:{
            // "valueFun":{
            //     type:Function,
            //     required: true,
            // },
            "max":{
                type:Number,
                default:25
            },
            "min":{
                type:Number,
                default:0
            }
        },
        data(){
            return{
                myPosition:{
                    left:0,
                    right:0,
                    now:0,
                    isBtn:0,
                    propoWidth:0
                },
                myDefault:null
            }
        },
        methods:{
            
        },
        mounted(){
            //滑块
            let that = this
            let mySlider = this.$refs.mySlider
            let propo = mySlider.children[1]
            let rightBtn = mySlider.children[3]
            let leftBtn = mySlider.children[0]
            let myWidth = 0

            const elementLeft = (e) => { //计算x坐标
                var offset = e.offsetLeft;
                if(e.offsetParent != null) offset += elementLeft(e.offsetParent);
                return offset;
            }

            const myCount = () =>{ //计算滑动
                if(this.myPosition.right-10>this.myPosition.left){ //判断滑动范围
                    this.myPosition.propoWidth = this.myPosition.right - this.myPosition.left
                    propo.style.width = this.myPosition.propoWidth+'%'
                    propo.style.left = this.myPosition.left + '%'
                    this.valueFun(this.myPosition.left,this.myPosition.right,this.myPosition.propoWidth)
                }else if(this.myPosition.right+10<this.myPosition.left){
                    this.myPosition.propoWidth = this.myPosition.left - this.myPosition.right
                    propo.style.width = this.myPosition.propoWidth+'%'
                    propo.style.left = this.myPosition.right+'%'
                    this.valueFun(this.myPosition.right,this.myPosition.left,this.myPosition.propoWidth)
                }
            }

            this.myDefault = () => {//初始化
                // this.myPosition.right = this.max
                // this.myPosition.left = this.min
                if(this.min<=25){
                    this.myPosition.left = this.min*2
                }else{
                    this.myPosition.left = (this.min-25)/3*2+50
                }
                if(this.max<=25){
                    this.myPosition.right = this.max*2
                }else{
                    this.myPosition.right = (this.max-25)/3*2+50
                }

                this.myPosition.propoWidth = this.myPosition.right - this.myPosition.left

                if(this.max > this.min){
                    // this.myPosition.propoWidth = this.max - this.min
                    propo.style.left = this.myPosition.left + '%'
                }else{
                    this.myPosition.propoWidth = this.min - this.max
                    propo.style.left = this.myPosition.right + '%'
                }
                propo.style.width = this.myPosition.propoWidth+'%'
                leftBtn.style.left = this.myPosition.right + '%'
                rightBtn.style.left = this.myPosition.left + '%'

                this.valueFun(this.myPosition.left,this.myPosition.right,this.myPosition.propoWidth)
                
            }

            let mySliderX = elementLeft(mySlider) //滑动块x坐标
            mySlider.addEventListener('touchmove',(e)=>{ //屏幕滑动事件
                let pageX = e.touches[0].pageX-mySliderX //获取滑动x坐标
                myWidth = (pageX/mySlider.offsetWidth)*100 //计算百分比
                if(myWidth>100){ //判断不超出范围
                    myWidth=100
                }else if(myWidth<0){
                    myWidth=0
                }
                if(this.myPosition.isBtn == 1 && (myWidth+10<=this.myPosition.right)){//判断焦点

                    if(myWidth<=25){
                        this.myPosition.left = myWidth*2
                    }else{
                        this.myPosition.left = Math.round((myWidth-25)/3*2+50)
                    }

                    this.myPosition.left = myWidth
                    rightBtn.style.left = myWidth+'%'
                }else if(this.myPosition.isBtn == 2 && (myWidth-10>=this.myPosition.left)){
                    this.myPosition.right = myWidth
                    leftBtn.style.left = myWidth+'%'
                }
                myCount()
            })
            // 传值给父组件
            this.valueFun = (a,b,c) =>{
                var newArr = [a,b,c]
                if(newArr[0]<=50){
                    newArr[0] = Math.round(newArr[0]/2)
                }else{
                    newArr[0] = Math.round((newArr[0]-50)/10*15+25)
                }
                if(newArr[1]<=50){
                    newArr[1] = Math.round(newArr[1]/2)
                }else{
                    newArr[1] = Math.round((newArr[1]-50)/10*15+25)
                }
                this.$emit("changeSlider",newArr)
            }
            // 接受父组件传递过来的事件
            this.updateSlider = (para1,para2)=>{
                var para1 = para1
                var para2 = para2
                if(para1<=25){
                    para1 = Math.round(para1*2)
                }else{
                    para1 = Math.round((para1-25)/3*2+50)
                }
                if(para2<=25){
                    para2 = Math.round(para2*2)
                }else{
                    para2 = Math.round((para2-25)/3*2+50)
                }
                this.myPosition.left = para1;
                this.myPosition.right = para2;
                rightBtn.style.left = para1+'%'
                leftBtn.style.left = para2+'%'
                propo.style.width = (para2 - para1)+'%'
                propo.style.left = para1+'%'
                leftBtn.style.left = this.myPosition.right + '%'
                rightBtn.style.left = this.myPosition.left + '%'
            }

            mySlider.addEventListener('touchstart',(e)=>{//屏幕触摸事件
                let touchX = e.touches[0].pageX-mySliderX
                let btnWidth = (leftBtn.offsetWidth/mySlider.offsetWidth)/2*100 //计算按钮宽度
                this.myPosition.now = (touchX/mySlider.offsetWidth)*100
                mySliderX = elementLeft(mySlider) //滑动块x坐标
                if(this.myPosition.now <= this.myPosition.left+btnWidth&&this.myPosition.now >= this.myPosition.left-btnWidth){ //计算区间 获取焦点
                    this.myPosition.isBtn = 1
                }else if(this.myPosition.now <= this.myPosition.right+btnWidth&&this.myPosition.now >= this.myPosition.right-btnWidth){
                    this.myPosition.isBtn = 2
                }else{
                    this.myPosition.isBtn = 0
                }
            })

            this.myDefault()
        },
        watch:{
            min(New,old){
                this.myDefault()
            },
            max(New,old){
                this.myDefault()
            }
        }
    }
</script>
<style lang="stylus">
    .slider{
            width: 100%;
            position:relative;
            height: 50px;
            .left-btn,.right-btn{
                position: absolute;
                top: -34px;
                transform:translate(-50%,0);
                &:before{
                    content: ""; 
                    display: block;
                    width: 0; 
                    height: 40px;
                    border-left: 17px solid transparent; 
                    border-right: 17px solid transparent; 
                    border-bottom: 17px solid #ce0021; 
                }
                &:after{
                    content: "";
                    display: block;
                    height: 30px;
                    width: 34px;
                    background: #ce0021;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                }
            }
            .propo{
                width: 0%;
                height: 6px;
                background: #ce0021;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
            }
            .propo-bg{
                background: #B6B6B6;
                border-radius: 6px;
                height: 6px;
                width:100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }
            .active{
                &:before{
                    border-bottom-color: #ce0021
                }
                &:after{
                    background: #ce0021;
                }
            }
    }
</style>